{% extends 'layout.html' %}

{% block title %}{{title}}{% endblock %}

{% block content %}


<div class="hbox hbox-auto-xs hbox-auto-sm ">
    <div class="col w-md bg-light dk b-r bg-auto">
        <div class="wrapper b-b bg">
            <a class="btn btn-sm btn-danger w-xs font-bold" href="/publish">发布文章</a>
        </div>
        <div class="wrapper hidden-sm hidden-xs" id="email-menu">
            <!--<ul class="nav nav-pills nav-stacked nav-sm">-->
                <!--<li class="active">-->
                    <!--<a  href="/">-->
                        <!--全部-->
                    <!--</a>-->
                <!--</li>-->
                <!--{% for category in categories %}-->
                <!--{% if '未分类'!==category.name %}-->
                <!--<li>-->
                    <!--<a href="/take/?s={{category.name}}">-->
                        <!--{{category.name}}-->
                    <!--</a>-->
                <!--</li>-->
                <!--{%endif%}-->
                <!--{%endfor%}-->
            <!--</ul>-->
            <div class="wrapper">Theme</div>
            <ul class="nav nav-pills nav-stacked nav-sm">
                <li>
                    <a href="/?t=top" class="{%if 'top' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: #3a3f51;"></i>
                        置顶
                    </a>
                </li>
                <li>
                    <a href="/?t=good" class="{%if 'good' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(39, 194, 76);"></i>
                        精华
                    </a>
                </li>
                <li>
                    <a href="/?t=share" class="{%if 'share' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: #fad733;"></i>
                        分享
                    </a>
                </li>
                <li>
                    <a href="/?t=ask" class="{%if 'ask' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: #f05050;"></i>
                        问答
                    </a>
                </li>
                <li>
                    <a href="/?t=job" class="{%if 'job' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(35, 183, 229);"></i>
                        招聘
                    </a>
                </li>
                <li>
                    <a href="/?t=doc" class="{%if 'doc' == t %}theme-active{%endif%}">
                        <i class="fa fa-fw fa-circle text-muted" style="color: rgb(114, 102, 186);"></i>
                        文档
                    </a>
                </li>
            </ul>

        </div>
    </div>


    <!--index right-->
    <div class="col">
        <div class="wrapper bg-light lter b-b">
            <div class="btn-group pull-right">
                <button class="btn btn-sm btn-bg btn-default disabled">{{page.page}}</button>
                <a href="/?p={{page.page-1}}&t={{t}}" class="btn btn-sm btn-bg btn-default {% if 1 == page.page %}disabled{% endif %}"><i class="fa fa-chevron-left"></i></a>
                <a href="/?p={{page.page+1}}&t={{t}}" class="btn btn-sm btn-bg btn-default {% if !page.total || page.total == page.page %}disabled{% endif %}"><i class="fa fa-chevron-right"></i></a>
            </div>
            <div class="btn-toolbar">
                <div class="btn-group dropdown">
                    <button class="btn btn-default btn-sm btn-bg">
                        <span id="theme-name" class="dropdown-label">
                            {% if t == 'all' %}主题{%endif%}
                            {% if t == 'share'%}分享{%endif%}
                            {% if t == 'ask'%}问答{%endif%}
                            {% if t == 'job'%}招聘{%endif%}
                        </span>
                        <span class="caret"></span>
                    </button>
                    <ul id="theme-list" class="dropdown-menu text-left text-sm">
                        <li><a href="/?t=share">分享</a></li>
                        <li><a href="/?t=ask">问答</a></li>
                        <li><a href="/?t=job">招聘</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a href="/" class="btn btn-sm btn-bg btn-default"><i class="fa fa-refresh"></i></a>
                </div>
            </div>
        </div>
        <!-- / header -->

        <!-- list -->
        <ul class="list-group list-group-lg no-radius m-b-none m-t-n-xxs">
            {% if !posts.length %}
                <div class="wrapper-md">暂无文章</div>
            {% endif%}

            {% for post in posts %}
                <li class="list-group-item clearfix b-l-white">

                    <a class="avatar thumb pull-left m-r" href="/user/{{post.name}}">
                        <img src="{{post.avatar}}">
                    </a>

                    <div class="pull-right text-sm text-muted">
                        <span class="hidden-xs ng-binding">{{post.updatetime}}</span>
                        <i class="fa fa-clock-o m-l-sm"></i>
                    </div>
                    <div class="clear">
                        <div>
                            <a class="text-md ng-binding" href="/{{post.type}}/{{post.flag}}">{{post.title}}</a>
                            {% if post.istop %}
                                <span class="label bg-dark m-l-sm">置顶</span>
                            {% elseif post.isgood %}
                                <span class="label bg-success m-l-sm">精华</span>
                            {% elseif 'share' === post.theme %}
                                 <span class="label bg-warning m-l-sm">分享</span>
                            {% elseif 'ask' === post.theme %}
                                 <span class="label bg-danger m-l-sm">问答</span>
                            {% elseif 'job' === post.theme %}
                                <span class="label bg-danger m-l-sm">招聘</span>
                            {% elseif 'doc' === post.type %}
                                <span class="label bg-primary m-l-sm">文档</span>
                            {%endif%}
                            <!--{% for tag in post.tags %}-->
                            <!--<span class="label bg-light m-l-sm ng-binding">{{tag}}</span>-->
                            <!--{% endfor %}-->
                        </div>
                        <div class="text-ellipsis m-t-xs ng-binding">
                            {{post.description}}
                        </div>
                    </div>
                </li>
            {% endfor %}

        </ul>
        <!-- / list -->


    </div>


</div>


{% endblock %}
